<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jq/jquery1.9/jquery-1.9.0.js"></script>
    <script>
          $(function(){
            $("input:eq(0)").click(function(){
                $("p[id='haha']").css("background","red");
            });
            $("input:eq(1)").click(function(){
                $("p[id!='haha']").css("background","green");
            });
            $("input:eq(2)").click(function(){
                $("p[id^='it']").css("background","yellow");
            });
            $("input:eq(3)").click(function(){
                $("p[class$='llo']").css("background","lightgreen");
            });

            $("input:eq(4)").click(function(){
                
                $("p[class*='baby']").css("background","yellow");
            });

            $("input:eq(5)").click(function(){
                $("div[id][class^='xi'][name*='ah']").css("background","skyblue");
            });
          
        });
    </script>
</head>
<body>
    <input type="button" value="选择包含id属性值等于haha的p元素">
    <input type="button" value="选择包含id属性值不等于haha的p元素">
    <input type="button" value="选择包含id属性值以it开头的p元素">
    <input type="button" value="选择包含class属性值以llo结尾的p元素">
    <input type="button" value="选择包含class属性值包含baby的p元素">
    <input type="button" value="选择包含id属性，并且class的属性值以xi开头，并且name的属性值中包含ah的div元素">
    <p class="babyxixi">welcome to haha</p>
    <div>我是div
        <p class="hello">hello haha</p>
    </div>
    <div>我是div
        <span id="hello">hello</span>
        <p>今天星期二</p>
    </div>
    <p id="haha">welcome to wbs23022</p>
    <p></p>
    <p class="angelababy">hello world</p>
    <p>welcome to wbs23022</p>
    <div  class="xiaaa" id="mydiv"  name="haha">div</div>
    <p id="itaaa">我是p</p>
    <div>happy wbs23022</div>
    <p>我是p
        <span>span</span>
    </p>
</body>
</html>